<template>
  <div class="min-h-screen bg-gray-50">


    <!-- 页面头部 -->
    <div class="pt-20">
      <div class="bg-gradient-to-r from-green-600 to-green-800 text-white py-16">
        <div class="container mx-auto px-12">
          <div class="max-w-4xl">
            <h1 class="text-5xl font-bold mb-6">学习资源</h1>
            <p class="text-xl leading-relaxed mb-8">
              丰富的学习资料、工具软件、项目模板，助力您的教学能力发展，帮助学生理解
            </p>
            <div class="flex gap-4">
              <el-button type="primary" size="default" class="rounded px-6 font-medium" @click="startLearning">
                我要讲课
              </el-button>
              <el-button size="default" class="border-2 border-white text-black bg-white hover:bg-gray-100 rounded px-6 font-medium">
                浏览全部
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 资源分类导航 -->
    <div class="bg-white py-8 shadow-sm">
      <div class="container mx-auto px-12">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-8">
            <button
              v-for="category in resourceCategories"
              :key="category.key"
              :class="['px-6 py-3 rounded-lg font-medium transition-all duration-200', 
                       selectedCategory === category.key 
                       ? 'bg-green-100 text-green-700 border-2 border-green-200' 
                       : 'text-gray-600 hover:text-green-600 hover:bg-green-50']"
              @click="selectedCategory = category.key"
            >
              <span class="mr-2">{{ category.icon }}</span>
              {{ category.name }}
              <span class="ml-2 text-sm opacity-70">({{ getCategoryCount(category.key) }})</span>
            </button>
          </div>
          <div class="flex items-center gap-4">
            <el-select v-model="sortBy" placeholder="排序方式" class="w-32" size="default">
              <el-option label="最新上传" value="latest" />
              <el-option label="下载最多" value="downloads" />
              <el-option label="文件大小" value="size" />
              <el-option label="评分最高" value="rating" />
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <!-- 资源列表 -->
    <div class="py-16 bg-white">
      <div class="container mx-auto px-12">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div 
            v-for="resource in filteredResources" 
            :key="resource.id"
            class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
          >
            <!-- 资源预览 -->
            <div class="h-48 bg-gradient-to-br from-gray-100 to-gray-200 relative overflow-hidden">
              <div class="absolute inset-0 flex items-center justify-center">
                <span class="text-6xl opacity-30">{{ resource.icon }}</span>
              </div>
              <div class="absolute top-3 left-3">
                <span class="bg-white bg-opacity-90 text-xs font-medium px-2 py-1 rounded-full text-gray-700">
                  {{ resource.type }}
                </span>
              </div>
              <div class="absolute top-3 right-3">
                <span class="bg-green-500 text-white text-xs font-medium px-2 py-1 rounded-full">
                  {{ resource.size }}
                </span>
              </div>
              <div class="absolute bottom-3 right-3">
                <div class="flex items-center gap-1 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
                  <span>⭐</span>
                  <span>{{ resource.rating }}</span>
                </div>
              </div>
            </div>

            <!-- 资源信息 -->
            <div class="p-6">
              <div class="flex items-center gap-2 mb-3">
                <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded font-medium">
                  {{ resource.category }}
                </span>
                <span class="text-xs text-gray-500">{{ resource.uploadDate }}</span>
              </div>
              
              <h3 class="text-lg font-bold mb-2 text-gray-900 line-clamp-2">{{ resource.title }}</h3>
              <p class="text-sm text-gray-600 mb-4 line-clamp-3">{{ resource.description }}</p>
              
              <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2">
                  <div class="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center">
                    <span class="text-xs">👤</span>
                  </div>
                  <span class="text-sm text-gray-700">{{ resource.author }}</span>
                </div>
                <div class="flex items-center gap-1 text-sm text-gray-500">
                  <span>⬇️</span>
                  <span>{{ resource.downloads }}</span>
                </div>
              </div>

              <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <span v-if="resource.price === 0" class="text-lg font-bold text-green-600">免费</span>
                  <span v-else class="text-lg font-bold text-blue-600">¥{{ resource.price }}</span>
                </div>
                <div class="flex gap-2">
                  <el-button size="small" class="rounded px-3" @click="previewResource(resource)">
                    预览
                  </el-button>
                  <el-button type="primary" size="small" class="rounded px-3" @click="downloadResource(resource)">
                    {{ resource.price === 0 ? '下载' : '购买' }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 加载更多 -->
        <div class="text-center mt-12">
          <el-button size="large" class="rounded-lg px-8 py-3" @click="loadMore">
            加载更多资源
          </el-button>
        </div>
      </div>
    </div>

    <!-- 推荐资源区域 -->
    <div class="py-16 bg-gray-50">
      <div class="container mx-auto px-12">
        <h2 class="text-3xl font-bold text-center mb-12 text-gray-900">热门推荐</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div 
            v-for="resource in recommendedResources" 
            :key="resource.id"
            class="bg-white rounded-lg shadow-md border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-200"
          >
            <div class="h-32 bg-gradient-to-br from-blue-100 to-blue-200 relative">
              <div class="absolute inset-0 flex items-center justify-center">
                <span class="text-3xl opacity-50">{{ resource.icon }}</span>
              </div>
            </div>
            <div class="p-4">
              <h4 class="font-semibold mb-2 text-gray-900 text-sm line-clamp-2">{{ resource.title }}</h4>
              <div class="flex items-center justify-between">
                <span class="text-xs text-green-600 font-medium">{{ resource.price === 0 ? '免费' : '¥' + resource.price }}</span>
                <div class="flex items-center gap-1 text-xs text-gray-500">
                  <span>⬇️</span>
                  <span>{{ resource.downloads }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Search, User } from '@element-plus/icons-vue'

const router = useRouter()

// 搜索和筛选
const searchText = ref('')
const selectedCategory = ref('all')
const sortBy = ref('latest')

// 资源分类
const resourceCategories = ref([
  { key: 'all', name: '全部资源', icon: '📚' },
  { key: 'documents', name: '文档资料', icon: '📄' },
  { key: 'tools', name: '开发工具', icon: '🛠️' },
  { key: 'templates', name: '项目模板', icon: '📋' },
  { key: 'media', name: '多媒体', icon: '🎬' },
  { key: 'datasets', name: '数据集', icon: '📊' }
])

// 资源数据
const resources = ref([
  {
    id: 1,
    title: 'Vue.js完整开发手册',
    description: '涵盖Vue.js从基础到高级的完整开发指南，包含最佳实践和项目案例',
    category: '文档资料',
    categoryKey: 'documents',
    type: 'PDF',
    size: '15.2MB',
    price: 0,
    author: '前端专家',
    rating: 4.9,
    downloads: 2840,
    uploadDate: '2024-01-15',
    icon: '📖'
  },
  {
    id: 2,
    title: 'Python数据科学工具包',
    description: '包含常用的Python数据科学库和工具，预配置开发环境，开箱即用',
    category: '开发工具',
    categoryKey: 'tools',
    type: 'ZIP',
    size: '128MB',
    price: 299,
    author: '数据科学家',
    rating: 4.8,
    downloads: 1567,
    uploadDate: '2024-01-20',
    icon: '🐍'
  },
  {
    id: 3,
    title: 'React电商项目模板',
    description: '完整的React电商网站模板，包含用户系统、商品管理、订单处理等功能',
    category: '项目模板',
    categoryKey: 'templates',
    type: 'ZIP',
    size: '45.6MB',
    price: 599,
    author: '全栈工程师',
    rating: 4.7,
    downloads: 892,
    uploadDate: '2024-01-25',
    icon: '🛒'
  },
  {
    id: 4,
    title: '机器学习算法演示视频',
    description: '生动形象的机器学习算法可视化演示，帮助理解复杂的算法原理',
    category: '多媒体',
    categoryKey: 'media',
    type: 'MP4',
    size: '2.1GB',
    price: 199,
    author: 'AI研究员',
    rating: 4.6,
    downloads: 1234,
    uploadDate: '2024-02-01',
    icon: '🎥'
  },
  {
    id: 5,
    title: '金融数据集合集',
    description: '包含股票、期货、外汇等金融市场的历史数据，适合量化分析研究',
    category: '数据集',
    categoryKey: 'datasets',
    type: 'CSV',
    size: '89.3MB',
    price: 0,
    author: '量化分析师',
    rating: 4.5,
    downloads: 3456,
    uploadDate: '2024-02-05',
    icon: '💰'
  },
  {
    id: 6,
    title: 'Node.js API开发指南',
    description: '详细的Node.js后端API开发教程，包含认证、数据库、部署等内容',
    category: '文档资料',
    categoryKey: 'documents',
    type: 'PDF',
    size: '28.7MB',
    price: 0,
    author: '后端架构师',
    rating: 4.8,
    downloads: 2156,
    uploadDate: '2024-02-10',
    icon: '📚'
  },
  {
    id: 7,
    title: 'Docker容器化部署工具',
    description: '一键式Docker容器化部署脚本，支持多种技术栈的快速部署',
    category: '开发工具',
    categoryKey: 'tools',
    type: 'Shell',
    size: '5.4MB',
    price: 199,
    author: 'DevOps工程师',
    rating: 4.4,
    downloads: 1678,
    uploadDate: '2024-02-12',
    icon: '🐳'
  },
  {
    id: 8,
    title: 'UI设计规范模板',
    description: '完整的UI设计规范文档模板，包含颜色、字体、组件等设计标准',
    category: '项目模板',
    categoryKey: 'templates',
    type: 'Figma',
    size: '12.8MB',
    price: 399,
    author: 'UI设计师',
    rating: 4.9,
    downloads: 967,
    uploadDate: '2024-02-15',
    icon: '🎨'
  }
])

// 推荐资源
const recommendedResources = ref([
  { id: 101, title: 'JavaScript高级编程', icon: '📖', price: 0, downloads: 5678 },
  { id: 102, title: 'Python爬虫工具包', icon: '🕷️', price: 299, downloads: 3421 },
  { id: 103, title: 'Vue组件库模板', icon: '🧩', price: 499, downloads: 2134 },
  { id: 104, title: '数据可视化图表', icon: '📊', price: 0, downloads: 4567 }
])

// 筛选后的资源
const filteredResources = computed(() => {
  let filtered = resources.value

  // 分类筛选
  if (selectedCategory.value !== 'all') {
    filtered = filtered.filter(resource => resource.categoryKey === selectedCategory.value)
  }

  // 搜索筛选
  if (searchText.value.trim()) {
    const searchTerm = searchText.value.toLowerCase()
    filtered = filtered.filter(resource => 
      resource.title.toLowerCase().includes(searchTerm) ||
      resource.description.toLowerCase().includes(searchTerm) ||
      resource.category.toLowerCase().includes(searchTerm) ||
      resource.author.toLowerCase().includes(searchTerm)
    )
  }

  // 排序
  switch (sortBy.value) {
    case 'downloads':
      filtered.sort((a, b) => b.downloads - a.downloads)
      break
    case 'size':
      filtered.sort((a, b) => parseFloat(b.size) - parseFloat(a.size))
      break
    case 'rating':
      filtered.sort((a, b) => b.rating - a.rating)
      break
    default: // latest
      filtered.sort((a, b) => new Date(b.uploadDate) - new Date(a.uploadDate))
  }

  return filtered
})

// 方法
const getCategoryCount = (categoryKey) => {
  if (categoryKey === 'all') return resources.value.length
  return resources.value.filter(resource => resource.categoryKey === categoryKey).length
}

const previewResource = (resource) => {
  ElMessage.info(`预览资源: ${resource.title}`)
}

const downloadResource = (resource) => {
  if (resource.price === 0) {
    ElMessage.success(`开始下载: ${resource.title}`)
  } else {
    ElMessage.info(`购买资源: ${resource.title} - ¥${resource.price}`)
  }
}

const loadMore = () => {
  ElMessage.info('加载更多资源...')
}

const startLearning = () => {
  router.push('/study')
}

const goToProfile = () => {
  router.push('/profile')
}

const openSocial = (platform) => {
  switch (platform) {
    case 'email':
      window.location.href = 'mailto:service@edulivelink.com'
      break
    case 'wechat':
      ElMessage.info('请扫描二维码关注我们的微信公众号')
      break
    case 'weibo':
      ElMessage.info('请关注我们的官方微博')
      break
  }
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
